Defining content layouts

In the Content Designer tool, select Manage content layouts. From the toolbar, choose New > Content Layout Definition to create a new content layout, choose Edit to change an existing content layout, or choose Organize > Delete to delete a content layout. You can define content layouts with the Content Layout Editor in two ways.

■    Use the Tool Box to create simple layouts by adding rows and specifying how many columns are in each row.

■    Click Create Custom Layout to code more complex layouts:

□    In the Layout Code field, insert the HTML and CSS code to create your custom content layout. If you are using CSS, you have the option to either add your custom styles to an existing CSS file in your application server’s App_Themes\[WebsiteName] directory, or to add a custom CSS file to that same directory. All CSS files in this directory are automatically loaded into the browser memory in alphabetical order. If duplicate selectors exist in this directory, then the attributes used in the last-loaded selector are used if there are any conflicts. For example, if you have body {color:blue; margin:10px;} in aastyle.css and you have body {color:red; width:50%;} in zzstyle.css, then the font color will red and both the margin and width attributes are applied because they do not conflict.

□    If you are using the YUI Grids CSS library, you can overload the CLASS attribute of a <DIV> element that functions as an iPart zone with first to indicate that this is the first of a series of grids, which helps floats and margins to work more smoothly.

□    You can overload the CLASS attribute of a <DIV> element that functions as an iPart zone with shade to highlight that grid with a gray background in the layout preview image, so that you can see the relative dimensions of each iPart zone.

□    Inside each <DIV> element that functions as an iPart zone, insert a single <P> element with a number that identifies the iPart zone. For example, if your layout comprises four iPart zones, the content of each <P> element could be the numbers 1, 2, 3, and 4, respectively. These <P> elements do not appear in the rendered content record if no iPart has been added to an iPart zone.

For example, the following code creates two equally-divided iPart zones in the top row, with two smaller, equally divided iPart zones beneath the left top iPart zone (and nothing beneath the top right iPart zone):

 

<div id="bd">

  <div class="yui-g">

    <div class="yui-u first shade"> <!-- top left 50% zone -->

       <div>

          <p>1</p>

       </div>

       <div>

         <div class="yui-u first shade"> <!-- bottom left 25% zone -->

            <p>3</p>

       </div>

       <div class="yui-u shade"> <!-- bottom right 25% zone -->

            <p>4</p>

       </div>

       </div>

    </div>

    <div class="yui-u shade"> <!-- top right 50% zone -->

      <p>2</p>

    </div>

  </div>

</div>

Troubleshooting

■    You must have Layout Editor CAG permissions in at least one content authority group (CAG) to which you belong.

■    If you plan to code custom content layouts, you must be familiar with CSS layout techniques.

■    The default content layouts shipped with iMIS are always overwritten during upgrades, so the best practice is to create new content layouts rather than modifying the default ones. Take care to name your user-created content layouts uniquely to prevent iMIS from treating them as standard iMIS content layouts during an upgrade. An easy technique to ensure unique naming is to prefix the name with an acronym for your organization, such as "ORG One Over Two".

Note: Membership in the SysAdmin security role effectively grants the full set of Document System permissions and the full set of CAG permissions (you are effectively a member of a MasterAdmin CAG too). However, to participate in web content authoring workflow, even members of the SysAdmin role must be an explicitly-listed member of at least one CAG.

Tip: Supported layout types

Although iMIS uses DIV-based CSS layout, you can use table layout or any combination of HTML elements that you prefer. The only absolute requirements are:

■    You must insert a single <p> element with only a single number inside it where you want each iPart zone to be located in your layout (unique numbers for each iPart zone, starting with 1). You must also have at least one of these <p>[number]</p> strings in your custom content layout. CM looks for these strings to determine how many iPart zones are in the layout, and where they are located. Any other content inside of a <p> element other than a single number is not considered as being an iPart zone, and the content is copied directly to the rendered output of the content record.

■    The HTML elements that you use must be valid in the context of a <body><form> container. For example, you cannot use a <head> element in your custom content layout.

You can also add ASPX code and other markup to add "standard" elements to a layout (such as always including a search box or a logon control on a given content layout, for example). These elements will be available in the published output of a content record, but they will not be visible when previewing your custom content layout in the layout editor.

More

■    YUI Grids CSS Library